<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #myMap {
            width: 600px;
            height: 600px;
            border: 1px solid red;
        }
    </style>
    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=aF4dfBtsBD209YNrVcj40nWV7Lm4CQb6"></script>
    <script>
        window.onload = function () {
            //创建地图实例对象
            var myMap = new BMapGL.Map('myMap');
            //设置地图中心点和地图级别
            var centerPoint = new BMapGL.Point(104.069944, 30.579012);
            myMap.centerAndZoom(centerPoint, 15);

            myMap.enableScrollWheelZoom();
            //当用户输入内容后获取用户输入的地址
            document.querySelector('#addr').onchange = function (event) {
                //获取用户输入的地址
                var addr = event.target.value;
                // console.log(addr);
                //创建地址解析对象
                var geo = new BMapGL.Geocoder();
                //根据文本地址获取Point对象
                geo.getPoint(addr, function (point) {
                    //创建标注对象
                    var marker = new BMapGL.Marker(point);
                    //将标注点添加到地图上
                    myMap.addOverlay(marker);
                    //设置地图中心点
                    myMap.centerAndZoom(point,15);
                }, '成都市');

            }

        }
    </script>
</head>

<body>
    <input type="text" id="addr">
    <div id="myMap"></div>
</body>

</html>